<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/css/daterangepicker.css">
    <script type="text/javascript" src="/js/moment.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/daterangepicker.js" charset="utf-8"></script>


</head>
<style>
    .layui-form input[type=radio]{
        display: inline-block !important;
    }
    .layui-form input[type=checkbox]{
        display: inline-block !important;
    }

    .layui-form-label {
        float: left;
        display: block;
        width: 88px !important;
        font-weight: 350;
        line-height: 20px;
        text-align: center;
    }

    .layui-input-inline{
        margin-right: 0px !important;
    }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend></legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item" >
                        <div class="layui-inline" style="width: 20%">
                            <label class="layui-form-label">执行器</label>
                            <div class="layui-input-inline">
                                <select name="jobActuator" lay-verify="required">
                                    <option th:each="dict,iterStat : ${JobActuatorList}" th:text="${dict.title}"
                                            th:value="${dict.id}" th:selected="${iterStat.index ==0}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 20%">
                            <label class="layui-form-label">任务</label>
                            <div class="layui-input-inline" style="width: 60%">
                                <select class="form-control" name="jobId" paramVal="<#if jobInfo?exists>${jobInfo.id}</#if>" >
                                    <option value="0" >全部</option>
                                </select>
                            </div>

                        </div>

                        <div class="layui-inline" style="width: 20%">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline" >
                                <select class="form-control" name="logStatus" >
                                    <option value="-1" >全部</option>
                                    <option value="1" >成功</option>
                                    <option value="2" >失败</option>
                                    <option value="3" >进行中</option>
                                </select>
                            </div>

                        </div>
                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label">调度时间</label>
                            <div class="layui-input-inline" style="width: 70%" >
                                <input readonly type="text" id="triggerTime" name="triggerTime" autocomplete="off" placeholder="请输入调度时间" class="layui-input" style="background: #eeeeee">
                            </div>
                        </div>

                        <div class="layui-inline" style="width: 2%">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


        <script type="text/html" id="test-dropdown-toolbar-barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="more">操作 <i class="layui-icon layui-icon-down"></i></a>
        </script>


    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

    var rangesConf = {
        '今日': [moment().startOf('day'), moment().endOf('day')],
        '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
        '最近7天': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
        '最近30天': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
        '本月': [moment().startOf('month').startOf('month'), moment().endOf('month')],
        '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    };
    var jobId = undefined;
    layui.use(['form', 'table', 'dropdown'], function () {
        var $ = layui.jquery,
            form = layui.form,
            dropdown = layui.dropdown,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: '/log_info/pageList',
            method: 'post',
            // toolbar: '#toolbarDemo',
            where:{ jobActuator:$("select[name='jobActuator']").val(),
                jobId:$("select[name='jobId']").val(),
                logStatus:$("select[name='logStatus']").val(),
                triggerTime:rangesConf['今日'][0]+' - '+rangesConf['今日'][1]

            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.recordsTotal, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            cols: [
                [
                {field: 'id',title: '任务ID'},
                {field: 'triggerTime', title: '调度时间',
                    templet: function (d) {

                        return timestampToDate1(d.triggerTime);
                    }
                },
                {
                        field: 'triggerCode',event:'scheduleType', title: '调度结果',
                        templet: function (d) {
                            var html = '';
                            if (d.triggerCode == 200) {
                                html = '<span style="color: green">'+ '成功' +'</span>';
                            } else if (d.triggerCode == 500) {
                                html = '<span style="color: red">'+  '失败' +'</span>';
                            } else if (d.triggerCode == 0) {
                                html = '';
                            }
                            return html;
                        }
                },
                {field: '', title: '调度日志',event:'logLook',
                   templet: function (d) {
                       return d.triggerMsg?'<a class="logTips" style="color: #00a2d4" href="javascript:;" >'+ '查看' +'</a>':'';

                   }
                 },

                    {field: 'handleTime', title: '执行时间',
                        templet: function (d) {

                            return timestampToDate1(d.handleTime);
                        }
                    },
                    {field: 'handleCode', title: '执行结果',
                        templet: function (d) {
                            // status
                            var html = '';
                            if (d.handleCode == 200) {
                                html = '<span style="color: green">'+ '成功' +'</span>';
                            } else if (d.handleCode == 500) {
                                html = '<span style="color: red">'+ '失败' +'</span>';
                            } else if (d.handleCode == 502) {
                                html = '<span style="color: red">'+ '失败（超时）' +'</span>';
                            } else if (d.handleCode == 0) {
                                html = '';
                            }
                            return html;
                        }
                    },
                    {field: 'handleMsg', title: '执行备注',
                        templet: function (d) {
                            return d.handleMsg?'<a class="logTips" href="javascript:;" >'+ '查看' +'<span style="display:none;">'+ '查看' +'</span></a>':'';

                        }
                    },
                {title: '操作', minWidth: 90, toolbar: '#test-dropdown-toolbar-barDemo', align: "center"}
             ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            pageSize: 15,
            page: true,
             request: {
                pageName: 'page',
                limitName: 'rows'
            } ,
            skin: 'line'
        });
        form.on('select(selectScheduleType)', function (data) {
            console.log(data); //得到select原始DOM对象
            if (data.value=='NONE') {
                document.getElementById('id_none').style.display="block";
                document.getElementById('id_cron').style.display="none";
                document.getElementById('id_fix_rate').style.display="none";
            }else if (data.value=='CRON') {
                document.getElementById('id_none').style.display="none";
                document.getElementById('id_cron').style.display="block";
                document.getElementById('id_fix_rate').style.display="none";
            }else if (data.value=='FIX_RATE') {
                document.getElementById('id_none').style.display="none";
                document.getElementById('id_cron').style.display="none";
                document.getElementById('id_fix_rate').style.display="block";
            }
            
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: data.field
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '新增执行器',
                    type: 2,
                    shade: 0,
                    maxmin:true,
                    shadeClose: false,
                    area: ['80%', '100%'],
                    content: '/job_info/add',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }


        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            var that = this;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '80%'],
                    content: '/job_actuator/add?id='+data.id,
                    yes:function () {
                        console.log(1111123);
                    }
                },
                function  cancel(){
                    //右上角关闭回调
                    console.log(123455666);
                }
              );
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
            else if (obj.event === 'logLook') {  //

                layer.open({
                    type: 1 //Page 层类型
                    ,area: ['600px', '450px']
                    ,btn: '确定'
                    ,content: '<div style="margin: 20px 0 0 40px;background-color: transparent">'+data.triggerMsg+'</div>'
                });
            }
            else if (obj.event === 'more') {
                //更多下拉菜单
                dropdown.render({
                    elem: that
                    ,show: true //外部事件触发即显示
                    ,data: [{
                        title: '执行日志'
                        ,id: 'executeLog'
                    }
                    ]
                    ,click: function(res, othis){
                        //根据 id 做出不同操作
                        if(res.id === 'executeLog'){
                            $.ajax({
                                url: '/log_info/logDetailCat',
                                type: 'POST',
                                data : {
                                    "logId":data.id,
                                    "fromLineNum":1
                                },
                                dataType : "json",
                                success: function (res) {
                                    console.log('----------back------ddddddd',res)
                                    if (res.code == "200") {


                                        layer.open({
                                            title: '执行日志' ,
                                            btn: '确定',
                                            content: res.data.logContent
                                        });
                                    } else {
                                        layer.open({
                                            title: res.message,
                                            btn: [ '确认' ],
                                            content: (res.message || '失败' ),
                                            icon: '2'
                                        });
                                    }

                                },
                                error: function (error) {

                                }
                            })
                        } else {
                            layer.msg('得到表格下拉菜单 id：'+ res.id);
                        }
                    }
                    ,isAllowSpread:true
                    ,align: 'right' //右对齐弹出（v2.6.8 新增）
                    ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                });
            }
        });
        form.render();
    });
    function reload() {
        location.reload();
    }

    /**
     * find title by name, GlueType
     */
    function findGlueTypeTitle(glueType) {
        return $('select[id="glueType"]').text();
    }
    function cancelOnceTime(){
        var targetModal = document.getElementById('runOnceTimeId');
        closeModal(targetModal);
    }
    // 获取触发模态框的自定义属性
    var modalButtons = document.querySelectorAll("[data-modal-action]");

    // 获取模态框主体
    var modals = document.querySelectorAll(".modal");

    function cancelBtn(){
        var targetModal = document.getElementById('myModal');
        closeModal(targetModal);
    }
    // 监听模态框的按钮事件
    modalButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var targetId = this.dataset.modalTarget;
            var targetModal = document.getElementById(targetId);

            if (targetModal) {
                var action = this.dataset.modalAction;

                if (action === "open") {
                    openModal(targetModal);
                } else if (action === "close") {
                    closeModal(targetModal);
                }
            }
        });
    });

    // 打开模态框
    function openModal(modal) {
        modal.style.display = "block";
        modal.querySelector(".modal-content").classList.remove("modal-hide");
    }
    // 打开模态框
    function openModal2(modal,id) {
        this.jobId=id;
        modal.style.display = "block";
        modal.querySelector(".modal-content").classList.remove("modal-hide");
    }
    function timestampToDate1(timestamp) {
        if (timestamp == undefined) {
            return '';
        }
        const date = new Date(timestamp);
        return date.toLocaleString();
    }
    // 关闭模态框
    function closeModal(modal) {
        modal.querySelector(".modal-content").classList.add("modal-hide");
        modal.querySelector(".modal-content").addEventListener("animationend", function () {
            modal.style.display = "none";
        }, { once: true });
    }

    // 监听模态框的关闭时事件
    modals.forEach(function(modal) {
        var closeButton = modal.querySelector(".close");
        if (closeButton) {
            closeButton.addEventListener("click", function() {
                var targetModal = this.closest(".modal");
                closeModal(targetModal);
            });
        }
    });

    // 当用户点击模态框外部时，关闭模态框
    window.onclick = function (event) {
        modals.forEach(function(modal) {
            if (event.target === modal) {
                closeModal(modal);
            }
        });
    };

    $(document).ready(function() {



        $('#triggerTime').daterangepicker({
            autoApply:false,
            singleDatePicker:false,
            showDropdowns:false,        // 是否显示年月选择条件
            timePicker: true, 			// 是否显示小时和分钟选择条件
            timePickerIncrement: 10, 	// 时间的增量，单位为分钟
            timePicker24Hour : true,
            opens : 'left', //日期选择框的弹出位置
            ranges: rangesConf,
            locale : {
                format: 'YYYY-MM-DD HH:mm:ss',
                separator : ' - ',
                customRangeLabel : '自定义' ,
                applyLabel :  '确定'  ,
                cancelLabel :  '取消'  ,
                fromLabel : '起始时间' ,
                toLabel :'结束时间' ,
                daysOfWeek : '日,一,二,三,四,五,六'.split(',') ,        // '日', '一', '二', '三', '四', '五', '六'
                monthNames : '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月'.split(',') ,        // '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                firstDay : 1
            },
            startDate: rangesConf['今日'][0],
            endDate: rangesConf['今日'][1]
        }, function(start, end, label)

        { console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
        });

    });
</script>
<style>
    /*模态框主体样式*/
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /*模态框公共样式*/
    .modal-content {
        background-color: #fefefe;
        margin: 50px auto 0;
        padding: 20px;
        border: 1px solid #888;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        animation: modal-show 0.3s;
    }

    /* 正常大小 */
    .modal-normal {
        width: 1000px;
    }

    /* 中等大小 */
    .modal-medium {
        width: 400px;
    }

    /* 迷你大小 */
    .modal-mini {
        width: 250px;
    }

    /* 隐藏 */
    .modal-hide {
        animation: modal-hide 0.3s;
    }

    /* 展示动画 */
    @keyframes modal-show {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 隐藏动画 */
    @keyframes modal-hide {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-50px);
        }
    }

    /*关闭按钮*/
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 12px;
        -webkit-tap-highlight-color: rgba(255,0,0,0);
    }

    /*关闭按钮的鼠标点击和经过样式*/
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,0,0,0);
    }
</style>
</body>
</html>